<!DOCTYPE html>
<html>
<head>
    <title>HTML5上传图片预览</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <div class="login-box">
        <h3 id="title">请选择图片文件：JPG/GIF</h3>
        <input type="file" class="inputfile3" name="file0" id="file0" multiple="multiple" /><br>
        <label for="file0" class="btn btn-success">选择一张或多张图片</label>
        <button class="btn btn-info" onclick="history.back()">返回</button>
    </div>

    <div class="modal" id="previewDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog"  role="document">
            <div class="modal-content ">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel" align="center">图片预览</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <img src="" id="img0" style="width: 47rem;height: 30rem;">
                </div>
                <div class="modal-footer" style="text-align: center">
                    <button type="button" onclick="uploadFile()" class="btn btn-primary" style="width: 200px;height: 40px;">确认</button>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript"> //动态加载css和js
//项目名
var project_name = "http://localhost:8081/base";

//  添加css
var link2 = document.createElement('link');
link2.setAttribute('type', 'text/css');
link2.setAttribute('rel', 'stylesheet');
link2.setAttribute('href', project_name+'/static/css/global.css');

var link3 = document.createElement('link');
link3.setAttribute('type', 'text/css');
link3.setAttribute('rel', 'stylesheet');
link3.setAttribute('href', project_name+'/static/assets/bootstrap-3.3.7-dist/css/bootstrap.css');
//写入css
document.head.appendChild(link2);
document.head.appendChild(link3);

//添加js
var script1 = '<script type="text/javascript" src='+project_name+'/static/assets/js/jquery-3.4.1.min.js>'+'<'+'/script>';
var script2 = '<script type="text/javascript" src='+project_name+'/static/js/global.js>'+'<'+'/script>';
var script3 = '<script type="text/javascript" src='+project_name+'/static/assets/upload/ajaxfileupload.js>'+'<'+'/script>';
var script4 = '<script type="text/javascript" src='+project_name+'/static/assets/bootstrap-3.3.7-dist/js/bootstrap.js>'+'<'+'/script>';
var script5 = '<script type="text/javascript" src='+project_name+'/static/assets/js/message.js>'+'<'+'/script>';
//写入js
document.write(script1,script2,script3,script4,script5);
</script>
<script>
    $("#file0").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
        $("#title").html("文件名:"+this.files[0].name+"<br/>文件大小:"+this.files[0].size)
        console.log("objUrl = "+objUrl);
        if (objUrl) {
            $("#img0").attr("src", objUrl);
            $("#previewDiv").modal();
        }
    }) ;
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL!=undefined) {
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    //上传图片
    function uploadFile() {
        $.ajaxFileUpload({
            url: 'http://localhost:8081/base/upload/image',
            fileElementId:'file0',
            dataType:'json',
            secureuri : false,
            success: function (data){
                if(undefined != data.result && data.result=="yes"){
                    if(undefined != data.insert && data.insert=="success"){
                        $.message({
                            message:'保存成功,已成功存入数据库！',
                            type:'success',
                            duration:3000,
                            showClose:true
                        });
                        return false;
                    }else if (undefined != data.insert && data.insert=="exist"){
                        $.message({
                            message:'数据库中已有该文件的记录！',
                            type:'info',
                            duration:3000,
                            showClose:true
                        });
                        return false;
                    }else if (undefined != data.insert && data.insert=="fail"){
                        $.message({
                            message:'添加记录失败',
                            type:'warning',
                            duration:3000,
                            showClose:true
                        });
                        return false;
                    }
                }else {
                    $.message({
                        message:'未知错误!',
                        type:'error',
                        duration:3000,
                        showClose:true
                    });
                    return false;
                }
            },
            error:function(data,status,e){
                alert(e);
            }
        });
    }
</script>
</body>